<template>
  <div class="top">
    <div class="top__my">
      <div class="top__my__img">
        <img src="https://s3.ax1x.com/2021/03/05/6mRJIA.jpg" alt="" />
      </div>
      <div class="top__my__name">热心市民李同学</div>
      <div class="top__my__flag"></div>
      <div class="top__my__id">ID: 1069643013</div>
      <ul class="top__my__detail">
        <li>
          <div class="top__my__detail__title">红包</div>
          <div class="top__my__detail__content">218</div>
        </li>
        <li>
          <div class="top__my__detail__title">优惠券</div>
          <div class="top__my__detail__content">12张</div>
        </li>
        <li>
          <div class="top__my__detail__title">仙豆</div>
          <div class="top__my__detail__content">88</div>
        </li>
        <li>
          <div class="top__my__detail__title">白条</div>
          <div class="top__my__detail__content">1000</div>
        </li>
      </ul>
    </div>
  </div>

  <div class="main">
    <ul class="main__content">
      <li>
        <div class="main__content__icon iconfont">&#xe668;&nbsp;我的钱包</div>

        <div class="main__content__detail iconfont">&#xe631;</div>
      </li>
      <li>
        <div class="main__content__icon iconfont">&#xe61f;&nbsp;我的地址</div>

        <div class="main__content__detail iconfont">&#xe631;</div>
      </li>
      <li>
        <div class="main__content__icon iconfont">&#xe660;&nbsp;客服与帮助</div>

        <div class="main__content__detail iconfont">&#xe631;</div>
      </li>
    </ul>
  </div>

  <Docker :currentIndex="3" />
</template>

<script>
import Docker from "../../components/Docker";
export default {
  name: "My",
  components: { Docker },
};
</script>

<style lang="scss" scoped>
.top {
  box-sizing: border-box;
  position: relative;
  height: 1.96rem;
  padding: 0.4rem;
  background-image: linear-gradient(0deg, rgba(0, 145, 255, 0) 4%, #0091ff 50%);
  &__my {
    width: 3rem;
    height: 2.55rem;
    background-color: #fff;
    border-radius: 0.08rem;
    box-shadow: 0 0.08rem 0.16rem 0 rgba(0, 0, 0, 0.08);
    margin-top: 0.2rem;

    text-align: center;
    &__flag {
      position: absolute;
      top: 1.3rem;
      right: 1.4rem;
      width: 0.2rem;
      height: 0.2rem;
      background-image: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/user-auth.png);
      background-repeat: no-repeat;
      background-position: -72px -52px;
    }
    &__img img {
      position: relative;
      top: -0.3rem;
      border-radius: 50%;
      width: 1.2rem;
    }
    &__name {
      font-size: 0.24rem;
      color: #262628;
      line-height: 0.36rem;
    }
    &__id {
      font-size: 0.14rem;
      color: #c1c0c9;
    }
    &__detail {
      display: flex;
      justify-content: space-evenly;
      list-style: none;
      padding: 0;
      div {
        line-height: 0.25rem;
      }
      &__title {
        font-size: 0.12rem;
        color: #c1c0c9;
        text-align: center;
      }
      &__content {
        font-size: 0.2rem;
        color: #262628;
        text-align: center;
      }
      li {
        flex: 1;
      }
    }
  }
}

.main {
  width: 3.5rem;
  height: 1.5rem;
  background-color: #fff;
  margin-top: 1.5rem;
  margin-left: 0.12rem;
  padding: 0.1rem 0;
  box-shadow: 0 0.08rem 0.16rem 0 rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  &__content {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 0 0.2rem;
    &__detail {
      position: relative;
      top: -0.3rem;
      transform: rotate(180deg);
    }
  }
  &__content li {
    flex: 1;
    display: flex;

    justify-content: space-between;
  }
}
</style>